<%--
  Created by IntelliJ IDEA.
  User: kin
  Date: 2017/8/16
  Time: 16:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea id="chat" style="width:694px;height: 294px;"></textarea>
<select id="people" style="display: block;width: 700px;">
</select>
<script type="text/plain" id="content"></script>
<input type="button" value="click" onclick="send()"/>
</body>
<script charset="utf-8" src="${ctx}/ueditor/ueditor.config.js"></script>
<script charset="utf-8" src="${ctx}/ueditor/ueditor.all.min.js"></script>
<script charset="utf-8" src="${ctx}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/sockjs.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('content', {
        initialFrameWidth: 700,
        initialFrameHeight: 300,
        wordCount: true,
        elementPathEnabled: false
    });

    var socket = null;
    if ('WebSocket' in window) {
        socket = new WebSocket("ws://192.168.1.110:8080/customer");
    } else {
        socket = new SockJS("http://192.168.1.110:8080/sockjs/customer");
    }


    socket.onopen = function () {
        var message = {};
        message["sendTo"] = "000000000000000000000000000000000";
        message["type"] = 9;
        socket.send(JSON.stringify(message));
    };

    socket.onmessage = function (res) {
        var message = JSON.parse(res.data);
        if (message.type === 9) {
            $("#people").html("<option value='00000000000000000000000000000000'>所有人</option>");
            var list = message.content.toString().split(',');
            for (var i = 0; i < list.length; i++) {
                $('#people').append("<option value='" + list[i] + "'>" + list[i] + "</option>");
            }
        }
        if (message.type === 3) {
            var content = $('#chat').html() + message.sendFrom + " 对你说：" + message.content + "\n";
            $('#chat').html(content);
        }
        if (message.type === 2) {
            var content = $('#chat').html() + message.sendFrom + " 说：" + message.content + "\n";
            $('#chat').html(content);
        }
        if (message.type === 1) {
            $('#people').append("<option value='" + message.content + "'>" + message.content + "</option>");
        }
        if (message.type === 0) {
            $('#people').find('option[value=' + message.content + ']').remove();
        }
    };
    socket.onerror = function () {
    };
    socket.onclose = function () {
    };

    function send() {
        var sendTo = $('#people').val();
        var message = {};
        message["content"] = ue.getContentTxt();
        message["sendTo"] = sendTo;
        message["type"] = 2;
        socket.send(JSON.stringify(message));
    }
</script>
</html>
